<template>
    <el-card class="box-card">
        <el-row style="margin-bottom:10px">
            <el-col :span="24">
                <div class="card-header">
                    <span>我的待办事项</span>
                    <el-button class="button" text>详情</el-button>
                </div>
            </el-col>
        </el-row>
        <div class="main-pannel">
            <el-calendar v-model="value">
                <template #date-cell="{ data }">
                    <div v-if="todoList.hasOwnProperty(data.day)">
                        <el-badge is-dot class="item" style="width: 100%;text-align:center;" :type="todoList[data.day].type">
                            <el-tooltip placement="top">
                                <template #content>
                                    <p v-for="v in todoList[data.day].list">{{ v.msg }}</p>
                                </template>
                                <p>
                                    {{ parseInt(data.day.split('-')[2]) }}
                                </p>
                            </el-tooltip>
                        </el-badge>
                    </div>
                    <div v-else>
                        <p style="width: 100%;text-align:center;">{{ parseInt(data.day.split('-')[2]) }}</p>
                    </div>
                </template>
            </el-calendar>
        </div>
    </el-card>
</template>

<script lang="ts" setup>

const value = ref(new Date())

let todoList = {
    '2022-11-03': {
        type: 'primary',
        list: [
            {
                msg: '您有尚未处理完的的订单',
                ref: '/orderDetial/16'
            },
            {
                msg: '账号变更通知',
                ref: '/orderDetial/16'
            },
        ]
    },
    '2022-11-15': {
        type: 'primary',
        list: [
            {
                msg: '新商品上线通知',
                ref: '/shop/new'
            },
        ]
    },
    '2022-11-18': {
        type: 'danger',
        list: [
            {
                msg: '系统例行维护两小时',
                ref: '/shop/new'
            },
        ]
    },
    '2022-11-30': {
        type: 'success',
        list: [
            {
                msg: '公司放假',
                ref: '/shop/new'
            },
        ]
    },
    '2022-12-05': {
        type: 'warning',
        list: [
            {
                msg: '系统例行维护两小时',
                ref: '/shop/new'
            },
        ]
    },
}
</script>
<style scoped>
.main-pannel .menu-item {
    height: 48px;
    padding: 30px 0px;
    text-align: center;
}

.main-pannel {
    padding-bottom: 20px;
}

</style>